<script setup lang="ts">
import { ref } from 'vue'
import TitleManage from './components/system/TitleManage.vue'
import NoticeManage from './components/system/NoticeManage.vue'
import ProblemManage from './components/system/ProblemManage.vue'
import DBManage from './components/system/DBManage.vue'

const loading = ref(false)
</script>

<template>
	<div class="system-manage" v-loading="loading">
		<!-- 系统标题设置 -->
		<TitleManage />

		<!-- 系统公告管理 -->
		<NoticeManage />

		<!-- 系统监控 -->
		<!-- <DBManage /> -->

		<!-- 常见问题管理 -->
		<ProblemManage />
	</div>
</template>

<style scoped lang="scss">
.system-manage {
	display: flex;
	flex-wrap: wrap;
	padding: 12px;

	:deep(.el-card) {
		margin: 10px;
		height: min-content;

		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			h2 {
				margin: 0;
				font-size: 16px;
				line-height: 1.5;
				padding: 4px 0;
			}
		}
	}

	.title-card {
		min-width: 80vh;
	}

	.notice-card,
	.monitor-card,
	.problem-card {
		min-width: 100vh;
		margin-top: 20px;
	}
}
</style>
